<template>
  <div>
    <a-card :bordered="false" size="default" title="数据源管理">
      <div class="table-operator">
        <a-button type="primary" class="btn-success" icon="plus" @click="handleAdd()">新增</a-button>
      </div>
      <a-spin :spinning="loading">
        <a-table
          ref="table"
          :columns="columns"
          :dataSource="data"
          :pagination="pagination"
          @change="handleTableChange"
          rowKey="id"
        >
          <span slot="name" slot-scope="text">
            <ellipsis :length="80" tooltip>{{ text }}</ellipsis>
          </span>
          <span slot="useType" slot-scope="text">
            {{ text ? 'Master' : 'Slave' }}
          </span>
          <span slot="activated" slot-scope="text, record">
            <a-switch
              checked-children="启用"
              un-checked-children="禁用"
              :default-checked="record.switch"
              v-model="record.switch"
              @change="changeActivated(record)"
            />
          </span>
          <span slot="description" slot-scope="text">
            <ellipsis :length="40" tooltip>{{ text }}</ellipsis>
          </span>
          <span slot="operate" slot-scope="text, record">
            <template>
              <a @click="handleView(record)">详情</a>
              <a-divider type="vertical" />
              <a @click="handleEdit(record)">修改</a>
              <a-divider type="vertical" />
              <a class="text-danger" @click="handleDelete(record)">删除</a>
            </template>
          </span>
        </a-table>
      </a-spin>
      <view-modal ref="viewModal" @ok="handleOk" />
      <create-modal ref="createModal" @ok="handleOk" />
      <edit-modal ref="editModal" @ok="handleOk" />
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import { Ellipsis } from '@/components'
import ViewModal from './modules/datasource/viewModal'
import CreateModal from './modules/datasource/createModal'
import EditModal from './modules/datasource/editModal'
import { getDatasourceList, deleteDatasource, editDatasource } from '@/api/datasource'

export default {
  name: 'Datasource',
  components: {
    Ellipsis,
    ViewModal,
    CreateModal,
    EditModal
  },
  data () {
    return {
      data: [],
      loading: true,
      visible: false,
      confirmLoading: false,
      // 分页属性
      pagination: {
        defaultPageSize: 10,
        pageNo: 0,
        pageSize: 10, // 默认每页显示数量
        showSizeChanger: true, // 显示可改变每页数量
        showQuickJumper: true, // 是否可以快速跳转至某页
        pageSizeOptions: ['10', '20', '50', '100'], // 每页数量选项
        showTotal: (total) => this.$t('pagination.total') + ` ${total} ` + this.$t('pagination.items'), // 分页中显示总的数据
        total: 0 // 总条数
      },
      columns: [
        {
          title: '名称',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' },
          sorter: (a, b) => {
            return a.name.localeCompare(b.name)
          }
        },
        {
          title: '唯一标识符',
          dataIndex: 'code'
        },
        {
          title: 'ES地址',
          dataIndex: 'url'
        },
        {
          title: '使用类型',
          dataIndex: 'useType',
          scopedSlots: { customRender: 'useType' }
        },
        {
          title: '状态',
          dataIndex: 'activated',
          scopedSlots: { customRender: 'activated' }
        },
        {
          title: '描述',
          dataIndex: 'description',
          scopedSlots: { customRender: 'description' }
        },
        {
          title: '操作',
          width: '150px',
          dataIndex: 'operate',
          scopedSlots: { customRender: 'operate' }
        }
      ]
    }
  },
  created () {},
  mounted () {
    this.getDictionariesList()
    // this.getPermission()
  },

  methods: {
    // 查看
    handleView (record) {
      this.$refs.viewModal.init(record)
    },
    // 新增
    handleAdd () {
      this.$refs.createModal.init()
    },

    // 编辑
    handleEdit (record) {
      console.log('编辑record-------', record)
      this.$refs.editModal.init(record) // $refs指弹出框的所有方法，edit只是modal框的一个方法
    },

    // 删除
    handleDelete (record) {
      this.$confirm({
        title: '提示',
        content: `你确认要删除数据源 ${record.name} 吗?`,
        okText: '确定',
        okType: 'primary',
        cancelText: '取消',
        onOk: () => {
          deleteDatasource({ id: record.id }).then((res) => {
            // 存储成功、刷新列表
            this.$notification['success']({
              message: '提示',
              description: '数据删除成功'
            })
            if (this.data.length === 1) {
              this.pagination.pageNo = this.pagination.pageNo - 1
            }
            this.getDictionariesList()
          })
        },
        onCancel () {
          console.log('Cancel')
        }
      })
    },

    /**
     * 获取列表
     */
    getDictionariesList () {
      const filter = { sort: 'id,desc', page: this.pagination.pageNo, size: this.pagination.pageSize }
      this.loading = true
      getDatasourceList(filter)
        .then((response) => {
          console.log('字典列表----', response)
          response.data.forEach((item) => {
            // item.createDate = moment(item.createDate).format('YYYY-MM-DD HH:mm:ss')
            // item.modifyDate = moment(item.modifyDate).format('YYYY-MM-DD HH:mm:ss')
            item.switch = !!item.activated
          })
          this.loading = false
          this.data = response.data
          this.pagination.total = Number(response.totalCount)
        })
        .catch((error) => {
          console.log(error)
        })
    },

    /**
     * 更新列表
     */
    handleOk () {
      this.getDictionariesList()
    },

    /**
     * 分页方法
     */
    handleTableChange (pagination) {
      this.pagination.pageNo = pagination.current - 1
      this.pagination.pageSize = pagination.pageSize
      this.getDictionariesList()
    },

    /**
     * 修改状态
     */
    changeActivated (record) {
      console.log('record', record)
      var params = { ...record }
      params.activated = params.switch ? 1 : 0
      console.log('params', params)
      editDatasource(params).then((res) => {
        console.log(res)
        this.$notification['success']({
          message: '提示',
          description: '数据修改成功！'
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
